<script lang="ts" setup>
import { useLocale } from '~/modules/locale';

const { setLocale, locale, localeOptions } = useLocale();
const options = computed(() => localeOptions.map(item => ({ value: item.value, name: item.label, icon: item.icon })));
const router = useRouter();
const route = useRoute();

async function confirm(code: string) {
  await setLocale(code);
  globalPopups.langPopup.close();
}
</script>

<template>
  <div
    v-for="i in options" :key="i.value"
    class="flex cursor-pointer items-center gap-2 rounded-1 px-1 py-2 text-sys-text-body hover:(bg-sys-layer-e/70 text-sys-text-head)"
    :class="locale === i.value ? 'bg-sys-layer-e/70 text-sys-text-head' : ''" @click=" confirm(i.value)"
  >
    <i :class="i.icon" class="text-4" />
    {{ i.name }}
  </div>
</template>
